<template>
  <div>
        <!-- 性能较差的用法 -->
    <ul>
      <li v-for="(item, index) in user" :key="index">
          <div v-if="item.isActive">{{ item.name }}</div>
        </li>
    </ul>
    <!-- 推荐的用法，先用计算属性把需要显示的数据过滤出来，再渲染 -->
    <ul>
      <li v-for="(item, index) in activeUser" :key="index">{{ item.name }}</li>
    </ul>
    <!-- 当要控制整个列表是否显示的时候，不要和for放一块 -->
    <!-- 这是好的写法，判断逻辑放在父级 -->
    <ul v-if="shouldShowUser">
        <li v-for="(item, index) in activeUser" :key="index">{{ item.name }}</li>
    </ul>
    <div class="box">盒子</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shouldShowUser: false, // 控制整个学生列表是否显示
      user: [
        { name: "tom", age: 18, isActive: false },
        { name: "jake", age: 18, isActive: true },
        { name: "mary", age: 18, isActive: true },
      ],
    };
  },
  computed: {
    //   剔除isActive为false的学生
    activeUser() {
      const active = this.user.filter((item) => {
        return item.isActive;
      });
      return active;
    },
  },
};
</script>

<style scoped>
/* scoped 用于生成样式作用于 */
.box {
    background: #000;
}
</style>